<template>
    <div class="recommend">
        <div class="head"><h3>热门文章</h3></div>
        <div class="rank" v-for="(item, index) in articleList" :key="item.blogId" @click="turnArticle(item.blogId)"><span>{{ index + 1 }}.</span> {{ item.title }}</div>
    </div>
</template>

<script>
export default {
    computed:{
        articleList(){
            let res = this.$store.state.hotArticle
            if(res.length === 0){
                res = JSON.parse(sessionStorage.getItem('hotArticle'))
            }
            return res
        }
    },
    methods:{
        turnArticle(id){
            this.$router.push({ name: 'article', params: { id: id } })
        }
    }
}
</script>

<style lang="less" scoped>
.recommend{
    width: 75%;
    padding: 0px 20px;
    height: 300px;
    margin-left: 40px;
    border: 1px solid lightskyblue;
    border-radius: 5px;

    .head{
        text-align: center;
        border-bottom: 1px solid #f0f0f2;
    }
    .rank{
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        margin-top: 5px;
        span{
            color: rgb(219, 0, 0);
            font-style: italic;
            margin-right: 10px;
        }
    }
    .rank:hover{
        cursor: pointer;
        color: red;
    }
}
</style>